{extend name="ace/layout/default" /}

{block name="content"}
<h3 class="header smaller lighter blue">
    Tables
    <small>
        <i class="icon-double-angle-right"></i>
        Static &amp; Dynamic Tables
    </small>
</h3>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-ml-12">
        <a href="{:url('articles/detail') }">
            <button class="btn btn-sm btn-success">
                <i class="icon-zoom-in bigger-110"></i>
                添加文章
            </button>
        </a>
        <a href="javascript:;" onclick="getList()">
            <button type="button" class="btn btn-sm btn-purple">
                <span class="icon-refresh bigger-110"></span>
                刷新
            </button>
        </a>
    </div>
    <div class="col-xs-12 col-sm-12 col-ml-12">
        <div class="space-4"></div>
        <form action="" method="post" id="form_data" class="first_form float-left" onsubmit="getList();return false;">
            <input type="hidden" name="start_function" value="0">
            <input type="hidden" name="page" value="1">
            <input type="hidden" name="limit" value="10">
            <select name="menu_id">
                <option value="0">请选择所属栏目</option>
            </select>
            <span class="input-icon">
                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                           autocomplete="off" name="search"/>
                    <i class="icon-search nav-search-icon" onclick="getList()"></i>
                </span>
        </form>
    </div>
</div>
<div class="space-4"></div>

<div class="table-responsive">
    <table id="sample-table-1" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th class="center">
                <label>
                    <input type="checkbox" class="ace" />
                    <span class="lbl"></span>
                </label>
            </th>
            <th>Domain</th>
            <th>Price</th>
            <th class="hidden-480">Clicks</th>

            <th>
                <i class="icon-time bigger-110 hidden-480"></i>
                Update
            </th>
            <th class="hidden-480">Status</th>

            <th></th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td class="center">
                <label>
                    <input type="checkbox" class="ace" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <a href="#">ace.com</a>
            </td>
            <td>$45</td>
            <td class="hidden-480">3,330</td>
            <td>Feb 12</td>

            <td class="hidden-480">
                <span class="label label-sm label-warning">Expiring</span>
            </td>

            <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                    <button class="btn btn-xs btn-success">
                        <i class="icon-ok bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-info">
                        <i class="icon-edit bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-danger">
                        <i class="icon-trash bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-warning">
                        <i class="icon-flag bigger-120"></i>
                    </button>
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                    <div class="inline position-relative">
                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-cog icon-only bigger-110"></i>
                        </button>

                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                            <li>
                                <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                                                        <span class="blue">
                                                                            <i class="icon-zoom-in bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                                        <span class="green">
                                                                            <i class="icon-edit bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                                        <span class="red">
                                                                            <i class="icon-trash bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td class="center">
                <label>
                    <input type="checkbox" class="ace" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <a href="#">base.com</a>
            </td>
            <td>$35</td>
            <td class="hidden-480">2,595</td>
            <td>Feb 18</td>

            <td class="hidden-480">
                <span class="label label-sm label-success">Registered</span>
            </td>

            <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                    <button class="btn btn-xs btn-success">
                        <i class="icon-ok bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-info">
                        <i class="icon-edit bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-danger">
                        <i class="icon-trash bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-warning">
                        <i class="icon-flag bigger-120"></i>
                    </button>
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                    <div class="inline position-relative">
                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-cog icon-only bigger-110"></i>
                        </button>

                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                            <li>
                                <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                                                        <span class="blue">
                                                                            <i class="icon-zoom-in bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                                        <span class="green">
                                                                            <i class="icon-edit bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                                        <span class="red">
                                                                            <i class="icon-trash bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td class="center">
                <label>
                    <input type="checkbox" class="ace" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <a href="#">max.com</a>
            </td>
            <td>$60</td>
            <td class="hidden-480">4,400</td>
            <td>Mar 11</td>

            <td class="hidden-480">
                <span class="label label-sm label-warning">Expiring</span>
            </td>

            <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                    <button class="btn btn-xs btn-success">
                        <i class="icon-ok bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-info">
                        <i class="icon-edit bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-danger">
                        <i class="icon-trash bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-warning">
                        <i class="icon-flag bigger-120"></i>
                    </button>
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                    <div class="inline position-relative">
                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-cog icon-only bigger-110"></i>
                        </button>

                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                            <li>
                                <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                                                        <span class="blue">
                                                                            <i class="icon-zoom-in bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                                        <span class="green">
                                                                            <i class="icon-edit bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                                        <span class="red">
                                                                            <i class="icon-trash bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td class="center">
                <label>
                    <input type="checkbox" class="ace" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <a href="#">best.com</a>
            </td>
            <td>$75</td>
            <td class="hidden-480">6,500</td>
            <td>Apr 03</td>

            <td class="hidden-480">
                <span class="label label-sm label-inverse arrowed-in">Flagged</span>
            </td>

            <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                    <button class="btn btn-xs btn-success">
                        <i class="icon-ok bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-info">
                        <i class="icon-edit bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-danger">
                        <i class="icon-trash bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-warning">
                        <i class="icon-flag bigger-120"></i>
                    </button>
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                    <div class="inline position-relative">
                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-cog icon-only bigger-110"></i>
                        </button>

                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                            <li>
                                <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                                                        <span class="blue">
                                                                            <i class="icon-zoom-in bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                                        <span class="green">
                                                                            <i class="icon-edit bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                                        <span class="red">
                                                                            <i class="icon-trash bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>

        <tr>
            <td class="center">
                <label>
                    <input type="checkbox" class="ace" />
                    <span class="lbl"></span>
                </label>
            </td>

            <td>
                <a href="#">pro.com</a>
            </td>
            <td>$55</td>
            <td class="hidden-480">4,250</td>
            <td>Jan 21</td>

            <td class="hidden-480">
                <span class="label label-sm label-success">Registered</span>
            </td>

            <td>
                <div class="visible-md visible-lg hidden-sm hidden-xs btn-group">
                    <button class="btn btn-xs btn-success">
                        <i class="icon-ok bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-info">
                        <i class="icon-edit bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-danger">
                        <i class="icon-trash bigger-120"></i>
                    </button>

                    <button class="btn btn-xs btn-warning">
                        <i class="icon-flag bigger-120"></i>
                    </button>
                </div>

                <div class="visible-xs visible-sm hidden-md hidden-lg">
                    <div class="inline position-relative">
                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                            <i class="icon-cog icon-only bigger-110"></i>
                        </button>

                        <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                            <li>
                                <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                                                        <span class="blue">
                                                                            <i class="icon-zoom-in bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                                                        <span class="green">
                                                                            <i class="icon-edit bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                                                        <span class="red">
                                                                            <i class="icon-trash bigger-120"></i>
                                                                        </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div><!-- /.table-responsive -->

<div class="hr hr-18 dotted hr-double"></div>

{/block}

{block name="script-src"}
<script src="__ACE__/js/jquery.dataTables.min.js?v={:config('cnpscy.resource_version_number')}"></script>
<script src="__ACE__/js/jquery.dataTables.bootstrap.js?v={:config('cnpscy.resource_version_number')}"></script>
{/block}

{block name="script"}
<script type="text/javascript">
    jQuery(function($) {
        var oTable1 = $('#sample-table-2').dataTable( {
            "aoColumns": [
                { "bSortable": false },
                null, null,null, null, null,
                { "bSortable": false }
            ] } );


        $('table th input:checkbox').on('click' , function(){
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function(){
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
            return 'left';
        }
    })
</script>
{/block}